<!DOCTYPE html>


<!--
#######################################
	- THE HEAD PART -
######################################
-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width,initial-scale=1">

	<title>SLIDER REVOLUTION -  The Responsive Slider Plugin</title>

    <!-- get jQuery from the google apis -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

    <!-- CSS STYLE-->
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

    <!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
    <link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen" />


    <!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

	<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
	<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />

	<!-- GOOGLE FONTS -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>

</head>



<!--
#######################################
	- THE BODY PART -
######################################
-->
<body>

	<article class="prevnext">
		<a class="" href="01.Sample-Boxed.html">01</a>
		<a class="" href="02.Sample-Fullwidth.html">02</a>
		<a class="" href="03.Sample-FullScreen.html">03</a>
		<a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
		<a class="" href="05.Sample-Aligns.html">05</a>
		<a class="" href="06.Sample-AlignForce.html">06</a>
		<a class="" href="07.Sample-Videos.html">07</a>
		<a class="" href="08.Sample-NavigationStyle.html">08</a>
		<a class="" href="09.Sample-Api.html">09</a>
		<a class="" href="10.Sample-LazyLoading.html">10</a>
		<a class="" href="11.Sample-Shuffle.html">11</a>
		<a class="" href="12.Sample-Backgrounds.html">12</a>
		<a class="" href="13.Sample-HideCaptions.html">13</a>
		<a class="" href="14.Sample-KenBurns.html">14</a>
		<a class="active" href="15.Sample-VideoBG.html">15</a>
		<a class="" href="16.Caption-ShowDown.html">16</a>
	</article>


	<!-- HEADER -->
	<header>
		<section class="container">
			<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
			<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
			<div style="clear:both"></div>
		</section>
	</header> <!-- END OF HEADER -->


	<article class="boxedcontainer">

	<!--
	#################################
		- THEMEPUNCH BANNER -
	#################################
	-->
	<!-- START REVOLUTION SLIDER 3.1 rev5 fullwidth mode -->

	<div class="tp-banner-container">
		<div class="tp-banner" >
			<ul>

			<!-- SLIDE  -->
			<li data-transition="slidehorizontal" data-slotamount="7" data-masterspeed="1000"  data-fstransition="fade" data-fsmasterspeed="1000" data-fsslotamount="7">
						<!-- MAIN IMAGE -->
						<img src="images/video_forest.jpg"  alt="video_forest"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
						<!-- LAYERS -->

						<!-- LAYER NR. 1 -->
						<div class="tp-caption tp-fade fadeout fullscreenvideo"
							data-x="0"
							data-y="0"
							data-speed="1000"
							data-start="1100"
							data-easing="Power4.easeOut"
							data-endspeed="1500"
							data-endeasing="Power4.easeIn"
							data-autoplay="true"
							data-autoplayonlyfirsttime="false"
							data-nextslideatend="true"
							data-forceCover="1"
							data-dottedoverlay="twoxtwo"
							data-aspectratio="16:9"
							data-forcerewind="on"
							style="z-index: 2">


						 <video class="video-js vjs-default-skin" preload="none" width="100%" height="100%"
						poster='images/video_forest.jpg' data-setup="{}">
						<source src='http://goodwebtheme.com/previewvideo/forest_edit.mp4' type='video/mp4' />
						<source src='http://goodwebtheme.com/previewvideo/forest_edit.webm' type='video/webm' />
						<source src='http://goodwebtheme.com/previewvideo/forest_edit.ogv' type='video/ogg' />
						</video>

						</div>

						<!-- LAYER NR. 2 -->
						<div class="tp-caption large_bold_white_25 customin customout tp-resizeme"
							data-x="center" data-hoffset="0"
							data-y="170"
							data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
							data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
							data-speed="600"
							data-start="1400"
							data-easing="Power4.easeOut"
							data-endspeed="600"
							data-endeasing="Power0.easeIn"
							style="z-index: 3">The clearest way into the Universe<br/>is through a forest wilderness.

						</div>

						<!-- LAYER NR. 3 -->
						<div class="tp-caption medium_text_shadow customin customout tp-resizeme"
							data-x="center" data-hoffset="0"
							data-y="bottom" data-voffset="-140"
							data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
							data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
							data-speed="600"
							data-start="1700"
							data-easing="Power4.easeOut"
							data-endspeed="600"
							data-endeasing="Power0.easeIn"
							style="z-index: 4">John Muir
						</div>
					</li>


					<!-- SLIDE  -->
			<li data-transition="slidehorizontal" data-slotamount="7" data-masterspeed="1000"  data-fstransition="fade" data-fsmasterspeed="1000" data-fsslotamount="7">
						<!-- MAIN IMAGE -->
						<img src="images/video_forest.jpg"  alt="video_forest"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
						<!-- LAYERS -->

						<!-- LAYER NR. 1 -->
						<div class="tp-caption tp-fade fadeout fullscreenvideo"
							data-x="0"
							data-y="0"
							data-speed="1000"
							data-start="1100"
							data-easing="Power4.easeOut"
							data-endspeed="1500"
							data-endeasing="Power4.easeIn"
							data-autoplay="true"
							data-autoplayonlyfirsttime="false"
							data-nextslideatend="true"
							data-forceCover="1"
							data-dottedoverlay="twoxtwo"
							data-aspectratio="16:9"
							data-forcerewind="on"
							style="z-index: 2">


						 <video class="video-js vjs-default-skin" preload="none" width="100%" height="100%"
						poster='images/video_forest.jpg' data-setup="{}">
						<source src='http://goodwebtheme.com/previewvideo/forest_edit.mp4' type='video/mp4' />
						<source src='http://goodwebtheme.com/previewvideo/forest_edit.webm' type='video/webm' />
						<source src='http://goodwebtheme.com/previewvideo/forest_edit.ogv' type='video/ogg' />
						</video>

						</div>

						<!-- LAYER NR. 2 -->
						<div class="tp-caption large_bold_white_25 customin customout tp-resizeme"
							data-x="center" data-hoffset="0"
							data-y="170"
							data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
							data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
							data-speed="600"
							data-start="1400"
							data-easing="Power4.easeOut"
							data-endspeed="600"
							data-endeasing="Power0.easeIn"
							style="z-index: 3">The clearest way into the Universe<br/>is through a forest wilderness.

						</div>

						<!-- LAYER NR. 3 -->
						<div class="tp-caption medium_text_shadow customin customout tp-resizeme"
							data-x="center" data-hoffset="0"
							data-y="bottom" data-voffset="-140"
							data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
							data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
							data-speed="600"
							data-start="1700"
							data-easing="Power4.easeOut"
							data-endspeed="600"
							data-endeasing="Power0.easeIn"
							style="z-index: 4">John Muir
						</div>
					</li>

			</ul>

			<div class="tp-bannertimer"></div>
		</div>
	</div>

	<!-- THE SCRIPT INITIALISATION -->
	<!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
	<script type="text/javascript">

		var revapi;

		jQuery(document).ready(function() {

			   revapi = jQuery('.tp-banner').revolution(
				{
						delay:9000,
						startwidth:1170,
						startheight:500,
						fullScreen:"on",
						forceFullWidth:"on",
						minFullScreenHeight:"320",
						videoJsPath:"rs-plugin/videojs/",
						fullScreenOffsetContainer: "header"
				});

		});	//ready

	</script>

	<!-- END REVOLUTION SLIDER -->


	</article><!-- Content End -->





	<div style="width:100%;height:40px"></div>


<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->

	<section class="container">
		<h2>The HTML5 Covering Video Background</h2>
		<p>In case you wish to Cover the Background with a HTML5 Video, you can do so, using a HTML5 Video Caption and set its parameters to force the Covering.</p>
		<p>For Best Result, set the First Frame of the HTML5 Video as "Poster Image" for the video, and also set the Main Background as the Same Image, for smooth Transitions</p>
		<p>The best if you Let it Restart every time the Slides starts, so the Frame of the Animation and the first Frame of Video is same.</p>
		<div style="width:100%;height:20px"></div>
		<h3>How does a Slide Markup Looks like then ?</h3>
		<pre>
		&lt;!-- SLIDE  --&gt;
&lt;li data-transition="slidehorizontal" data-slotamount="7" data-masterspeed="1000"  data-fstransition="fade" data-fsmasterspeed="1000" data-fsslotamount="7"&gt;
			&lt;!-- MAIN IMAGE --&gt;
			&lt;img <strong>src="images/video_forest.jpg"</strong>  alt="video_forest"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat"&gt;
			&lt;!-- LAYERS --&gt;

			&lt;!-- LAYER NR. 1 --&gt;
			&lt;div class="tp-caption tp-fade fadeout fullscreenvideo"
				data-x="0"
				data-y="0"
				data-speed="1000"
				data-start="1100"
				data-easing="Power4.easeOut"
				data-endspeed="1500"
				data-endeasing="Power4.easeIn"
				<strong>data-autoplay="true"</strong>
				data-autoplayonlyfirsttime="false"
				<strong>data-nextslideatend="true"</strong>
				<strong>data-forceCover="1"</strong>
				<strong>data-dottedoverlay="twoxtwo"</strong>
				<strong>data-aspectratio="16:9"</strong>
				<strong>data-forcerewind="on"</strong>
				style="z-index: 2"&gt;


				 &lt;video class="video-js vjs-default-skin" preload="none" width="100%" height="100%"
				<strong>poster='images/video_forest.jpg'</strong> data-setup="{}"&gt;
				&lt;source src='http://goodwebtheme.com/previewvideo/forest_edit.mp4' type='video/mp4' /&gt;
				&lt;source src='http://goodwebtheme.com/previewvideo/forest_edit.webm' type='video/webm' /&gt;
				&lt;source src='http://goodwebtheme.com/previewvideo/forest_edit.ogv' type='video/ogg' /&gt;
				&lt;/video&gt;

			&lt;/div&gt;
&lt;/li&gt;


		</pre>
	</section>

</body>